<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="350" style="border:1px solid #d3d3d3;"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // Define coordinates and dimensions based on the image
        const yRod = 150;
        const rodLength = 240;
        const rodHeight = 10;
        const xA = 100;
        const xB = xA + rodLength;
        const xO = xA + rodLength / 2;
        const yP_prime = 50;
        const xP = xB + 80;

        // Set drawing styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = '20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // 1. Draw the rod AB
        ctx.strokeRect(xA, yRod - rodHeight / 2, rodLength, rodHeight);
        ctx.fillRect(xA, yRod - rodHeight / 2, rodLength, rodHeight);


        // 2. Draw labels for the rod and points
        ctx.fillStyle = 'black'; // Text color
        ctx.fillText('A', xA - 20, yRod);
        ctx.fillText('B', xB + 15, yRod);
        ctx.fillText('O', xO, yRod + 20);

        // 3. Draw point P' and its label
        ctx.beginPath();
        ctx.arc(xO, yP_prime, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText("P'", xO, yP_prime - 15);

        // 4. Draw dashed line from P' to O on the rod
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(xO, yP_prime);
        ctx.lineTo(xO, yRod - rodHeight / 2);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // 5. Draw the extension line from B to P
        ctx.beginPath();
        ctx.moveTo(xB + ctx.lineWidth/2, yRod);
        ctx.lineTo(xP, yRod);
        ctx.stroke();

        // 6. Draw point P and its label
        ctx.beginPath();
        ctx.arc(xP, yRod, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('P', xP + 15, yRod);

        // 7. Draw the dimension line for length l
        const yDim = yRod + 60;
        const tickHeight = 10;
        ctx.beginPath();
        // Horizontal line
        ctx.moveTo(xA, yDim);
        ctx.lineTo(xB, yDim);
        // Left tick
        ctx.moveTo(xA, yDim - tickHeight / 2);
        ctx.lineTo(xA, yDim + tickHeight / 2);
        // Right tick
        ctx.moveTo(xB, yDim - tickHeight / 2);
        ctx.lineTo(xB, yDim + tickHeight / 2);
        ctx.stroke();

        // 8. Draw label 'l' for the length
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('l', xO, yDim);

        // 9. Draw the caption text
        ctx.font = '20px "SimSun", "Songti SC"';
        ctx.fillText('习题 7-29 图', canvas.width / 2, yDim + 60);

    </script>
</body>
</html>